<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加元素</title>
    <script src="./res/jquery-3.5.1.min.js"></script>
</head>

<body>
    <button id="btn01">prepend&append</button>
    <p id="p01">我是p01的内容</p>
    <button id="btn02">before&after</button>
    <p id="p02">我是p02的内容</p>
</body>

</html>
<script>
    $(function(e) {
        $('#btn01').click(function(e) {
            e.preventDefault();
            // prepend&append元素内部追加
            $('#p01').prepend('内容:');
            $('#p01').append('结尾');
        });
        $('#btn02').click(function(e) {
            e.preventDefault();
            // before&after元素外部插入
            $('#p02').before('内容:');
            $('#p02').after('结尾');
        });
    });
</script>